<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>插值表达式</title>
</head>

<body>
  <div id='app'>
    <!-- 
    插值表达式：V也的一种模板语法
    作用：利用表达式进行插值渲染
    语法：{{表达式}}
    注意;1.使用的数据要存在
    2支持表达式，不是语句 if for else 
     3.不要在属性中使用插值表达式
    
    
    
    -->
    <p>{{nickName}}</p>
    <!-- 转换成大写 -->
    <p>{{nickName.toUpperCase()}}</p>
    <p>{{nickName + '你好啊'}}</p>
    <p>{{age > 18 ? '成年' : '未成年'}}</p>
    <!-- 对象属性的获取 -->
    <p>{{friend.name}}</p>
    <p>{{friend.desc}}</p>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      // 所管理的容器
      el: '#app',
      data: {
        nickName: 'tony',
        age: 19,
        friend: {
          name: '李四',
          desc: '热爱学习'
        }

      }
    })
  </script>
</body>

</html>